/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="my-dataset-empty">
        <div class="dataset-empty__title">
            <lang>Genius Ai 数据集使用指引</lang>
        </div>
        <div class="dataset-empty__description">
            <lang>用于标注、训练、分析等的数据集合，支持将您的数据集存储在个人的数据空间中，同时，Genius AI支持统一管理数据集的存储、文件、数据结构等信息。</lang>
        </div>
        <div class="dataset-empty__cards">
            <div class="empty-cards__card">
                <i class="iconfont iconshangchuan- card-icon"></i>
                <div class="empty-card__title">
                    <lang>STEP1: 创建数据集</lang>
                </div>
                <div class="empty-card__description">
                    <lang>在GeniusAI网页端创建数据集，您可以轻松地将本地的数据文件上传到GeniusAI DataStore进行管理和保存。</lang>
                </div>
            </div>
            <div class="empty-cards__card">
                <i class="iconfont iconzairu card-icon"></i>
                <div class="empty-card__title">
                    <lang>STEP2: 数据消费</lang>
                </div>
                <div class="empty-card__description">
                    <lang>支持对表格数据进行在线的交互式SQL查询、挂载数据集到CodeStudio进行开发、提交集群任务对数据进行预处理并保存等</lang>
                </div>
            </div>
            <div class="empty-cards__card">
                <i class="iconfont iconguanlishujuji card-icon"></i>
                <div class="empty-card__title">
                    <lang>STEP3: 管理数据集</lang>
                </div>
                <div class="empty-card__description">
                    <lang>您可以在我的数据集里对上传的数据集进行查看和管理，并且可以对数据集添加说明和标签、查看schema、上传或删除数据文件等</lang>
                </div>
            </div>
        </div>
        <div class="dataset-empty__button">
            <sf-button-primary class="empty-button__item" @click="creatDataset">创建数据集</sf-button-primary>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        creatDataset() {
            this.$router.push({
                name: 'creat_dataset', query: {
                    name: 'creat_dataset'
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.my-dataset-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    
    .dataset-empty {
        &__title {
            font-size: 24px;
            font-weight: 500;
            color: #333333;
            height: 36px;
            line-height: 36px;
            margin-bottom: 16px;
        }
        
        &__description {
            height: 21px;
            font-size: 14px;
            line-height: 21px;
            color: #666666;
            margin-bottom: 126px;
        }
        
        &__cards {
            display: flex;
            
            .empty-cards__card {
                position: relative;
                width: 332px;
                height: 220px;
                border-radius: 2px;
                background: #FAFBFC;
                box-sizing: border-box;
                border: 1px solid #EEEEEE;
                padding: 55px 38px 0 38px;
                
                .card-icon {
                    display: flex;
                    width: 48px;
                    height: 48px;
                    line-height: 48px;
                    font-size: 32px;
                    color: white;
                    background-color: #1770E6;
                    border-radius: 50%;
                    justify-content: center;
                    position: absolute;
                    top: -24px;
                    left: 142px;
                }
                
                .empty-card {
                    &__title {
                        text-align: center;
                        height: 22px;
                        font-size: 14px;
                        font-weight: bold;
                        line-height: 22px;
                        color: #666666;
                        margin-bottom: 16px;
                    }
                    
                    &__description {
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 24px;
                        text-align: center;
                        color: #999999;
                    }
                }
                
                & + .empty-cards__card {
                    margin-left: 64px;
                }
            }
        }
        
        &__button {
            margin-top: 80px;
            
            .empty-button__item {
                width: 166px;
                height: 48px;
            }
        }
    }
}
</style>
